<template>
  <a-form class="smart-query-form">
    <a-row class="smart-query-form-row">
      <a-form-item class="smart-query-form-item" label="分类标签">
        <a-select v-model:value="queryForm.questionTag" allowClear placeholder="选择标签" style="width: 160px">
          <a-select-option :value="0">通用</a-select-option>
          <a-select-option :value="1">iPhone</a-select-option>
          <a-select-option :value="2">iPad</a-select-option>
          <a-select-option :value="3">安卓手机</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item class="smart-query-form-item" label="题目名称">
        <a-input v-model:value="queryForm.questionName" placeholder="请输入题目名称" style="width: 160px"/>
      </a-form-item>

      <a-form-item class="smart-query-form-item" label="更新时间">
        <a-space :size="12" direction="vertical">
          <a-range-picker v-model:value="searchDate" :ranges="defaultTimeRanges" @change="dateChange"/>
        </a-space>
      </a-form-item>

      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button type="primary" @click="resetPageNumAjaxQuery">
          <template #icon>
            <SearchOutlined/>
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery">
          <template #icon>
            <ReloadOutlined/>
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <a-card :bordered="false" :hoverable="true" size="small">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button size="small" type="primary" @click="add()">
          <template #icon>
            <PlusOutlined/>
          </template>
          新增题目
        </a-button>
      </div>
    </a-row>

    <a-table
        :columns="columns"
        :dataSource="tableData"
        :loading="tableLoading"
        :pagination="false"
        :scroll="{ x: 1300 }"
        bordered
        rowKey="enterpriseId"
        size="small"
    >
      <template #bodyCell="{ column, record, text }">

        <template v-if="column.dataIndex === 'questionTag'">
          {{ questionTagToName(text) }}
        </template>

        <template v-if="column.dataIndex === 'operate'">
          <div class="smart-table-operate">
            <a-button type="link" @click="update(record)">编辑</a-button>
            <a-button type="link" @click="copyQuestion(record)">复制</a-button>
            <a-button danger type="link" @click="confirmDelete(record)">删除</a-button>
          </div>
        </template>
      </template>
    </a-table>

    <div class="smart-query-table-page">
      <a-pagination
          v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize"
          :defaultPageSize="queryForm.pageSize"
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :show-total="(total) => `共${total}条`"
          :total="total"
          show-less-items
          showQuickJumper
          showSizeChanger
          @change="ajaxQuery"
          @showSizeChange="ajaxQuery"
      />
    </div>
  </a-card>

</template>


<script setup>
import {defaultTimeRanges} from "/@/lib/default-time-ranges";
import {PAGE_SIZE, PAGE_SIZE_OPTIONS} from "/@/constants/common-const";
import {nextTick, onMounted, reactive, ref} from "vue";
import {smartSentry} from "/@/lib/smart-sentry";
import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
import TableOperator from "/@/components/support/table-operator/index.vue";
import {questionApi} from './question-api';
import {message, Modal} from "ant-design-vue";
import {SmartLoading} from '/@/components/framework/smart-loading';

import {useRouter} from 'vue-router';


const router = useRouter();

const columns = ref([
  {
    align: 'center',
    title: '题目id',
    dataIndex: 'id',
    width: 60,
  },
  {
    align: 'center',
    title: '分类标签',
    dataIndex: 'questionTag',
    width: 100,
  },
  {
    align: 'center',
    title: '题目名称',
    dataIndex: 'questionName',
    width: 80,
  },
  {
    align: 'center',
    title: '选项',
    dataIndex: 'optionNameConcat',
    width: 120,
    ellipsis: true,
  },
  {
    align: 'center',
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 100,
  },
  {
    align: 'center',
    title: '操作',
    dataIndex: 'operate',
    width: 80,
    fixed: 'right'
  },
]);

const queryFormDataDefault = {
  updateTimeBegin: undefined, //修改时间 开始
  updateTimeEnd: undefined, //修改时间 结束
  questionTag: undefined,//分类标签 0.通用 1.iphone 2.ipad 3.安卓 多选逗号拼接
  questionName: undefined, //题目名称
  pageNum: 1,
  pageSize: PAGE_SIZE,
};
const queryForm = reactive({...queryFormDataDefault});
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref();
// 日期选择
let searchDate = ref();
const modalVisible = ref(false);

function dateChange(dates, dateStrings) {
  queryForm.updateTimeBegin = dateStrings[0];
  queryForm.updateTimeEnd = dateStrings[1];
}

// 重置查询条件
function resetQuery() {
  searchDate.value = [];
  Object.assign(queryForm, queryFormDataDefault);
  ajaxQuery();
}

onMounted(() => {
  ajaxQuery();
});

function resetPageNumAjaxQuery(){
  queryForm.pageNum = 1;
  ajaxQuery();
}
// 查询
async function ajaxQuery() {
  try {
    tableLoading.value = true;
    let responseModel = await questionApi.queryPage(queryForm);
    const list = responseModel.data.list;
    total.value = responseModel.data.total;
    tableData.value = list;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

function update(records) {
  router.push({path: '/question-config', query: {questionId: records.id, isCopy: false}});
}

function copyQuestion(records) {
  router.push({path: '/question-config', query: {questionId: records.id, isCopy: true}});
}

// 添加
function add() {
  router.push('/question-config');
}

// 删除
function confirmDelete(record) {

  Modal.confirm({
    title: '提示',
    content: '确定要删除【' + record.questionName + '】吗?',
    okText: '删除',
    okType: 'danger',
    onOk() {
      singleDelete(record);
    },
    cancelText: '取消',
    onCancel() {
      return Promise.resolve();
    },
  });
}

async function singleDelete(brandData) {
  try {
    SmartLoading.show();
    await questionApi.delete(brandData.id);
    message.success('删除成功');
    ajaxQuery();
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    SmartLoading.hide();
  }
}

function questionTagToName(tag) {
  return tag.replace('0', '通用').replace('1', 'iPhone').replace('2', 'iPad').replace('3', '安卓手机');
}
</script>

<style lang="less" scoped>

</style>